<template>
  <div class="marker">
    <div v-if="position == 'left'" class="title" :style="{color: color}">{{ name }}</div>
    <div class="radius">
      <span class="radius-center animal1" :style="{background: color}"></span>
      <span class="radius-center animal2" :style="{background: color}"></span>
      <span class="radius-center animal3" :style="{background: color}"></span>
      <span class="radius-center" :style="{background: color}"></span>
    </div>
    <div v-if="position == 'right'" class="title" :style="{color: color}">{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: 'Marker',
  props: ['name', 'color', 'position']
}
</script>

<style scoped>
  .marker {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
  }

  .radius {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .radius-center {
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .animal1 {
    animation: change infinite 3s;
    -webkit-animation: change infinite 3s;
  }

  .animal2 {
    animation: change infinite 3s;
    -webkit-animation: change infinite 3s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
  }

  .animal3 {
    animation: change infinite 3s;
    -webkit-animation: change infinite 3s;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
  }

  @keyframes change
  {
    from {
      width: 10px;
      height: 10px;
      opacity: 0.4;
    }
    to {
      width: 80px;
      height: 80px;
      opacity: 0;
    }
  }

  @-webkit-keyframes change /* Safari 与 Chrome */
  {
    from {
      width: 10px;
      height: 10px;
      opacity: 0.4;
    }
    to {
      width: 80px;
      height: 80px;
      opacity: 0;
    }
  }
</style>
